<template>
  <!-- :wrapperClosable="true"
    :after-visible-change="afterVisibleChange"
    @close="onClose"
    :show-close="true"
    :size="drawerWidth()" 
     :title="node.name"
  -->

  <el-drawer
      ref="flowRootDrawer"
      direction="rtl"
      v-model="visible"
      :before-close="handleClose"
  >
    <template #header>
      <span class="flow-ant-drawer-title">
      <el-icon><EditPen/></el-icon>
        <EditName v-model:value="node.name"/>
      </span>

      <!-- <span>
        {{node.name}}
      </span> -->
      <!-- <img :src="ccIcon" class="anticon" /> -->
      <!-- <span class="flow-ant-drawer-title">
        <EditName v-model.value="node.name" />
      </span>
      <h4>嘎嘎嘎嘎</h4> -->
      <!-- <slot>
        <el-input v-model="node.name" ></el-input>
      </slot> -->
    </template>
    <div class="flow-setting-module">
      <div class="flow-setting-content">
        <div class="flow-setting-item">
          <p class="flow-setting-item-title">表单权限</p>
          <AuthForm v-model:value="node.props.formPerms" readable/>
        </div>
      </div>
    </div>
    <!-- <FlowDrawerFooter @close="onClose" @save="onSave" /> -->
  </el-drawer>
</template>
<script setup name="FlowRootDrawer">
import {flowMixin} from '../../../mixins/flowMixin';
import FlowDrawerFooter from '../../../common/DrawerFooter.vue';
import EditName from '../../../common/EditName.vue';
import AuthForm from '../../../common/AuthForm.vue';
import flowhook from '../../../mixins/flowhook';
import {
  reactive,
  ref,
  createApp,
  defineEmits,
  defineProps,
  computed,
  onMounted,
  toRefs,
  defineExpose,
  getCurrentInstance
} from "vue";
import {useStore} from 'vuex';
/* 组件局部注册 */
const store = useStore();
const emit = defineEmits(['close'])

const {uuid, nameClass, delNode, drawerWidth, ccIcon} = flowhook();

const {currentInstance, proxy} = getCurrentInstance();


const visible = ref(false)
const node = ref({})


const afterVisibleChange = (val) => {
  console.log('visible', val);
}

const showDrawer = (data) => {
  visible.value = true;
  node.value = data;
  console.log("这里是mc root抽屉弹窗-------->", visible.value, JSON.stringify(node));
}

const onClose = () => {
  visible.value = false;
  emit('close');
}

const handleClose = () => {
  console.log("node-配置信息保存----config>", JSON.stringify(node.value))
  console.log("这个?????????????", node.value.props.formPerms.length)

  // 更新节点显示信息
  if (node.value.props?.formPerms?.length > 0) {
    store.dispatch('process/updateNode', {currNode: node.value, field: 'content', value: '已设置'});
    // store.dispatch('process/updateNode', { currNode: node.value, field: 'error', value: false });
  } else {
    store.dispatch('process/updateNode', {currNode: node.value, field: 'content', value: null});
    // store.dispatch('process/updateNode', { currNode: node.value, field: 'error', value: false });
  }
  onClose();
}

defineExpose({
  showDrawer
});
</script>
